<template>
  <div class="p_y20 row-align-center search-box">
    <div class="search-main">
      <el-input clearable v-model="params.filter" placeholder="搜索关键词...按回车进行搜索" @keyup.enter="onPageChange(1)"/>
    </div>
  </div>
  <!--flex-row justify-between flex-wrap-->
  <div class="home-container">
    <div class="row-align-center w100" v-if="tableData.length===0">
      <el-empty description="暂无课程数据"></el-empty>
    </div>
    <div class="item" v-for="(item,i) in tableData" :key="i" v-else>
      <div class="item-box">
        <div class="flex-row title">
          <div class="font18">{{ item.name }}</div>
        </div>
        <div class="flex-row text-light">
          <span>{{ teacherMap[item.thSno] || item.thSno }}</span>
          <span>.</span>
          <span>{{ typesMap[item.typeName] || item.typeName }}</span>
        </div>
        <el-divider></el-divider>
        <div class="text-black intro">
          {{ item.remarks || "" }}
        </div>
        <div class="flex-row flex-wrap images">
          <el-image class="image" alt="" :src="item.coverImg" v-if="item.coverImg&&item.coverImg.length"/>
        </div>
        <div class="p_t10 flex-row align-center justify-between flex-wrap footer">
          <div class="flex-row align-center">
            <span class="text-red2 font22">￥{{ item.price }}</span>
          </div>
          <div class="flex-row-reverse">
            <el-button size="small" type="success" @click="$router.push({name:'goodInfo',query:{id:item.id}})">
              前往预约
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="item"></div>-->
    <!--<div class="item"></div>-->
  </div>
  <div class="p_y25 flex-row justify-center" v-if="pageMeta.count>0">

    <el-pagination
        background layout="total, prev, pager, next"
        :current-page="pageMeta.current_page"
        :page-size="pageMeta.limit" :total="pageMeta.total"
        @current-change="onPageChange"></el-pagination>
  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRaw} from "vue"
import {deepClone} from "../utils/helpers";
import Course from "../api/modules/Course";
import {usePageMeta} from "../hooks/usePageTableData";
import {useCourseTypes} from "../hooks/useCourseTypes";
import {useTeachers} from "../hooks/useTeachers";

export default defineComponent({
  name: "Home",
  setup() {
    const pageHandle = usePageMeta();
    const typesHandle = useCourseTypes();
    const teacherHandle = useTeachers();
    const params = reactive({
      filter: "",
    });
    const tableData = ref([]);

    onPageChange(1);

    async function onPageChange(page) {
      const pageMeta = deepClone(toRaw(pageHandle.pageMeta.value));
      if (page) {
        pageMeta.index = page;
      }
      try {
        const {data} = await Course.lists({
          ...pageMeta,
          ...params,
        });
        tableData.value = (data.data || []).map(v => {
          try {
            v.images = JSON.parse(v.images)
          } catch (e) {
            v.images = [];
          }
          return v
        });
        pageHandle.updatePageMeta(pageMeta.index, data.count);

      } catch (e) {
        console.log(e);
      }
    }

    return {
      ...pageHandle,
      ...typesHandle,
      ...teacherHandle,
      params,
      onPageChange,
      tableData,
    }
  },
})
</script>

<style lang="scss" scoped>
.search-box {
  .search-main {
    width: 50%;
    min-width: 300px;
  }
}

.home-container {
  width: 100%; // 默认宽度
  margin: 20px auto; // 剧中
  columns: 3; // 默认列数
  column-gap: 30px; // 列间距
  //padding: 20px 0;

  .item {
    //flex-shrink: 0;
    //width: 30%;
    //margin: 10px 0;
    box-sizing: border-box;

    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
    border: solid 1px #f3f3f3;
    border-radius: 5px;
    padding: 15px;

    .intro {
      max-height: 90px;
      overflow: hidden;
    }

    .images {
      .image {
        margin: 10px;
        //width: 100px;
      }
    }
  }
}
</style>
